<template>
  <div class="role-continer">
    <a-card class="card">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        layout="inline"
        @finish="getRoleList"
        ref="formRef"
      >
        <a-form-item label="角色名称" name="roleName">
          <a-input
            v-model:value="formState.roleName"
            placeholder="请输入角色名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card class="card card-table">
      <div class="add-depart">
        <a-button type="primary" @click="onAddRole">新增部门</a-button>
      </div>
      <a-table
        bordered
        :pagination="false"
        :loading="loading"
        :columns="columns"
        :dataSource="roleList"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-switch
              :checked="record.status == 1"
              checked-children="启用"
              un-checked-children="禁用"
              @change="onChangeRoleStatus(record)"
            />
          </template>
          <template v-if="column.key === 'action'">
            <div class="action-col">
              <a-button type="primary" size="small" @click="onEditRole(record)">
                <template #icon>
                  <form-outlined />
                </template>
                编辑
              </a-button>
              <a-button
                type="danger"
                size="small"
                v-if="!(record.role === 'super')"
              >
                <template #icon>
                  <delete-outlined />
                </template>
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
    <RoleDrawer
      :visible="drawerVisible"
      :role="selectRole"
      @update:visible="toggleDrawerVisible"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Api from "@/service/systemService";
import { ISysRole } from "@/type/System";
import { FormInstance } from "ant-design-vue";
import RoleDrawer from "./components/roleDrawer.vue";
import { DeleteOutlined, FormOutlined } from "@ant-design/icons-vue";

const columns = [
  {
    title: "角色名称",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "角色标识",
    dataIndex: "role",
    key: "role",
  },
  {
    title: "角色状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "角色描述",
    dataIndex: "description",
    key: "description",
  },
  {
    title: "创建时间",
    dataIndex: "createtime",
    key: "createtime",
  },
  {
    title: "操作",
    key: "action",
    width: 180,
    fixed: "right",
  },
];
const selectRole = ref<ISysRole | any>(null);
const drawerVisible = ref(false);
const roleList = ref<ISysRole[]>([]);
const loading = ref(false);
const formState = ref({
  roleName: "",
});
const formRef = ref<FormInstance>();

const getRoleList = async () => {
  loading.value = true;
  const res = await Api.getSysRole();
  roleList.value = res;
  loading.value = false;
};
const onChangeRoleStatus = (record: ISysRole) => {
  record.status = record.status === "1" ? "0" : "1";
};
const onReset = () => {
  formRef.value?.resetFields();
};
const toggleDrawerVisible = () => {
  drawerVisible.value = !drawerVisible.value;
};
const onEditRole = (record: ISysRole) => {
  selectRole.value = record;
  toggleDrawerVisible();
};
const onAddRole = () => {
  selectRole.value = null;
  toggleDrawerVisible();
};

onMounted(() => {
  getRoleList();
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.role-continer {
  margin: 6px;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  .card {
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
  .card-table {
    flex: 1;
    .action-col {
      display: flex;
      justify-content: space-around;
    }
    .add-depart {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 16px;
    }
  }
}
</style>
